<template>
  <div class="app-container">
    <el-row style="margin-bottom: 30px;">
      <el-col :span="6">
        <div class="title">
          <img src="../../assets/icons/批量注册.png" alt="batch" class="icon">
          <span>批量注册</span>
        </div>
      </el-col>
    </el-row>
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" style="margin-bottom: 30px;"/>
    <div v-if="tableData.length > 0">
      <el-row type="flex" justify="space-between" style="margin-bottom: 30px;">
        <el-col :span="8">
          <div class="title">
            <img src="../../assets/icons/提交数据.png" alt="data" class="icon">
            <span>要提交的数据：</span>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="width: 100%;letter-spacing: 1em;font-size: 18px;height: 40px" @click="handleSubmit">确认提<span style="letter-spacing: 0;">交</span></el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of tableHeader" :prop="item" :label="item" :key="item"/>
      </el-table>
    </div>
    <div v-else>
      <el-row style="margin-bottom: 30px;">
        <el-col :span="24">
          <div class="title">
            <img src="../../assets/icons/示例.png" alt="opentime" class="icon">
            <span>示例：Excel格式对应如下 （id:用户工号、name:用户姓名、password:用户密码、dept:用户所属部门、email:用户邮箱、tel:用户手机号）</span>
          </div>
        </el-col>
      </el-row>
      <el-table :data="demoData" border highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column v-for="item of demoHeader" :prop="item" :label="item" :key="item"/>
      </el-table>
    </div>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { batchAddUser } from '@/api/user'

export default {
  name: 'MoreRegister',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: [],
      demoData: [{
        id: 'u101',
        name: '用户102',
        password: '123456',
        dept: 'd02',
        email: '123456@qq.com',
        tel: '13012349876'
      }, {
        id: 'u102',
        name: '用户102',
        password: '123456',
        dept: 'd02',
        email: '1234567@qq.com',
        tel: '13112349876'
      }, {
        id: 'u103',
        name: '用户103',
        password: '123456',
        dept: 'd02',
        email: '12345678@qq.com',
        tel: '13212349876'
      }],
      demoHeader: ['id', 'name', 'password', 'dept', 'email', 'tel']
    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 3 / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '请上传的文件大小不要超过3MB',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      results.forEach(element => {
        element.password = element.password.toString()
      })
      this.tableData = results
      this.tableHeader = header
      // console.log(this.tableData)
    },
    async handleSubmit() {
      const res = await batchAddUser(this.tableData)
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '提交成功',
          type: 'success',
          duration: 2000
        })
      }
    }
  }
}
</script>
